<template>
  <ul class="navbar">
    <router-link :to="item.to" tag="li" v-for="item in navs" :key="item.id" >
      <i :class="item.iconClass"></i>
      <div class="text">{{item.text}}</div>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: 'navbar',
  data () {
    return {
      navs: [
        {
          id: 'index-page',
          text: '首页',
          to: '/',
          iconClass: 'icon iconfont icon-homefill'
        },
        {
          id: 'have-money-spend',
          text: '有钱花',
          to: '/have-money-spend',
          iconClass: 'icon iconfont icon-tubiao207'
        },
        {
          id: 'manage-money',
          text: '理财',
          to: '/manage-money',
          iconClass: 'icon iconfont icon-xinyongqiahuankuan'
        },
        {
          id: 'zh-page',
          text: '账户',
          to: '/zh-page',
          iconClass: 'icon iconfont icon-zhanghushezhi'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/global.scss';
@import '~@/assets/css/element.scss';
.navbar {
  @include list(row);
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ccc;
  padding-top: 16px;
  overflow: hidden;
  background: #fffffe;
  padding: 5px 0;
  li {
    flex: 1;
    text-align: center;
    .icon {
      display: block;
      font-size: 46px;
      color: $gb-color-light-red!important;
    }
    .text {
      text-align: center;
      font-size: 24px;
      line-height: 36px;
      color: $gb-color-light-red!important;
      font-weight: 300;
      color: #888!important;
    }
    &.router-link-exact-active {
      .icon {
        color: #4E5566;
        color: $gb-color-active-red!important;
      }
      .text {
        font-weight: 700;
        color: #333!important;
      }
    }
  }
}
</style>
